<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/tools/unitJS.js"></script>
</head>
<body>
	<div id="warp">
		
	</div>
</body>
	<script type="text/javascript">
	
	var warp = document.getElementById('warp');
	var x;
	var y;

	warp.onmousedown = function(e){

		var windowWidth = document.documentElement.clientWidth;
		var windowHeight = document.documentElement.clientHeight;

		var ev = e || event;
		var parentClient = UnitJS.getPostion(this);
		var clientX = ev.clientX - parentClient.left;
		var clientY = ev.clientY - parentClient.top;

		document.onmousemove = function(move){

			var moveev = move || event;
			x = moveev.clientX - clientX;
			y = moveev.clientY - clientY;

			if (x < 0) {
				x = 0;
			}
			if (y < 0) {
				y = 0;				
			}
			if (x + warp.offsetWidth > windowWidth) {
				x = windowWidth - warp.offsetWidth;
			}
			if (y + warp.offsetHeight > windowHeight) {
				y = windowHeight - warp.offsetHeight;
			}
			warp.style.left = x + 'px';
			warp.style.top = y + 'px';
		}

		document.onmouseup = function(){
			document.onmousemove = null;
		}
	}

	</script>
</html>